<template>
  <div>
    <div v-if="topInputShow">
      <el-form :inline="true" class="demo-form-inline" >
        <el-form-item label="绑定状态">
          <el-select v-model="roomStatus" size="small" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadOwnerRoom(1)" size="small" style="background-color: #23C6C8" icon="el-icon-search" type="success">查询
          </el-button>
          <el-button icon="el-icon-refresh" @click="reset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="btn-circle" style="margin-bottom: 10px">
      <el-button icon="el-icon-search" size="mini" circle @click="topInputShows"></el-button>
      <el-button icon="el-icon-refresh" size="mini" circle @click="refresh"></el-button>
    </el-row>
    <el-table
        :data="ownerRooms"
        border
        id="tableId"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55"
          align="center">
      </el-table-column>
      <el-table-column
          label="序号"
          width="180"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerRoomId }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="小区名称"
          width="130"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyCommunity.communityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="楼栋名称"
          width="130"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyBuilding.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="单元名称"
          width="130"
          align="center">
        <template slot-scope="scope" >
          <span style="margin-left: 10px">{{scope.row.zyUnit.unitName}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="房间名称"
          width="120"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyRoom.roomName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="业主信息"
          width="170"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyOwner.ownerRealName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="业主类型"
          width="180"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;width: 20px" v-if="scope.row.zyOwner.ownerType==='yz'">业主</span>
          <span style="margin-left: 10px" v-else>租户</span>
        </template>
      </el-table-column>
      <el-table-column
          label="绑定状态"
          width="180"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomStatus == 'Auditing' ? '审核中' : scope.row.roomStatus == 'Binding' ? '已绑定' : '已拒绝'}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="备注"
          width="120"
          align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.roomStatus === 'Auditing'"
                     size="mini"
                     type="text"
                     @click="openExamine(scope.row)"
                     icon="el-icon-thumb">审核</el-button>
          <el-button v-if="scope.row.roomStatus !== 'Auditing'"
                     size="mini"
                     type="text"
                     @click="openRecord(scope.row.ownerRoomId)"
                     icon="el-icon-s-fold">审核记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5,10,15,20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!-- 审核记录全过程 -->
    <el-dialog :title="title" :visible.sync="examineRecord" width="820px">
      <el-table
          :data="examineList"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            label="序号"
            type="index"
            width="180"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.recordId }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="业主姓名"
            type="index"
            width="110"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.zyOwners.ownerRealName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="业主类型"
            type="index"
            width="80"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px;width: 20px" v-if="scope.row.zyOwners.ownerType==='yz'">业主</span>
            <span style="margin-left: 10px" v-else>租户</span>
          </template>
        </el-table-column>
        <el-table-column
            label="绑定状态"
            width="100"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.zyOwnerRooms.roomStatus == 'Auditing' ? '审核中' : scope.row.zyOwnerRooms.roomStatus == 'Binding' ? '已绑定' : '已拒绝'}}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="审核意见"
            width="100"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.recordAuditOpinion }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="审核人姓名"
            width="110"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.createName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="审核人类型"
            width="80"
            align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px;width: 20px" v-if="scope.row.recordAuditType==='Web'">业主</span>
            <span style="margin-left: 10px" v-else>租户</span>
          </template>
        </el-table-column>record_audit_type
      </el-table>
    </el-dialog>

    <!-- 添加或修改房屋绑定 对话框 -->
    <el-dialog :title="title" :visible.sync="openOwnerRoom" width="500px" append-to-body>
      <el-form ref="form"  label-width="80px" :rules="formRules">
        <el-form-item label="审核意见" prop="recordAuditOpinion">
          <el-input type="textarea" v-model="recordAuditOpinion"  placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save('Binding')">同 意</el-button>
        <el-button @click="save('Reject')">拒 绝</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "ZyOwnerRoomView",
  data(){
    return{
      ownerRooms:null,
      current: 1,
      size: 5,
      pages: 0,
      total:0,
      topInputShow:true,
      roomStatus:"",
      title:"", //对话框的标题
      openOwnerRoom:false,
      examineRecord:false,
      recordAuditOpinion:"",
      recordId:"",
      comId:"",
      examineList:[],
      options:[{
        value:"Auditing",
        label:"审核中"
      },{
        value:"Binding",
        label:"已绑定"
      },{
        value:"Reject",
        label:"已拒绝"
      }],
      formRules:{
        recordAuditOpinion:[
          {required: true,message: "审核记录不能为空",trigger: "blur"},
        ]
      },
      ownerRoom:{
        ownerRoomId: null,
        communityId: null,
        buildingId: null,
        unitId: null,
        roomId: null,
        ownerId: null,
        ownerType: null,
        roomStatus: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      }
    }
  },
  methods:{
    loadOwnerRoom(current){
      this.axios.get("zyOwnerRoom-page?current=" + this.current + "&size=" + this.size + "&roomStatus=" + this.roomStatus + "&communityId=" + this.comId)
          .then(res => {
            this.ownerRooms = res.data.data.records;
            this.pages = res.data.data.pages;
            this.total = res.data.data.total;
          })
    },
    handleSizeChange(size) {
      this.size = size;
      this.loadOwnerRoom(this.current);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadOwnerRoom(this.current);
    },
    //复选框的选择、选择一个时修改和删除按钮都显示 、 选择两个的时候只显示删除
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.communityId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    topInputShows(){
      this.topInputShow= !this.topInputShow;
    },
    refresh(){
      this.$router.go(0)
    },
    //点击重置按钮
    reset(){
      this.roomStatus="";
    },
    openExamine(row){
      this.ownerRoom = row;
      this.openOwnerRoom = true;
      this.title = "审核";
    },
    openRecord(id){
      this.examineRecord = true;
      this.title = "审核记录全过程";
      this.axios.get("zyOwnerRoomList?id=" + id)
          .then(res => {
            this.examineList = [];
            this.examineList = res.data.data;
            console.log(this.examineList)
          });
    },
    save(type) {
          console.log(this.ownerRoom)
      console.log(type);
          let username = localStorage.getItem("username");
          if(this.recordAuditOpinion != null && this.recordAuditOpinion != ''){
            this.axios.put("ownerRoomRecord/" + this.recordAuditOpinion + "/" + username + "/" + type , this.ownerRoom)
                .then(res => {
                  if(res.data.code == 200){
                    this.loadOwnerRoom(this.current);
                  }else {
                    this.$message({
                      type: 'warning',
                      message:"该房屋已绑定业主",
                    });
                  }
                  this.recordAuditOpinion="";
                })
          }else {
            this.$message({
              type: 'warning',
              message:"审核记录不能为空",
            });
          }

      this.openOwnerRoom = false;
    },
    // 联动
    setCurrentZyCommunity(id){
      this.comId=id
      this.loadOwnerRoom(1)
    }
    // turnDown(){
    //   this.axios.put("turnDownOwnerRoomRecord/",{recordId:this.recordId,recordAuditOpinion:this.recordAuditOpinion})
    //       .then(res => {
    //         this.loadOwnerRoom(this.current);
    //       })
    //   this.openOwnerRoom = false;
    // }
  },
  mounted() {
    this.loadOwnerRoom(1);
    // 联动
    this.$bus.$on('mainCurrentCommunityChange',(id)=>{
      this.setCurrentZyCommunity(id)
    });
  }
}
</script>

<style scoped>
.page {
  float: right;
  margin-top: 30px;
}

.btn {
  float: left;
  margin-bottom: 10px;
}

.btn-circle {
  float: right;
}

.demo-form-inline {
  position: relative;
  left: -580px;
}
.num {
  position: relative;
  left: -300px;
}

.radio {
  position: relative;
  left: -300px;
}
.tree {
  position: relative;
  left: 10px;
  width: 500px;
}
.tree-border {
  border: 1px solid wheat;
  padding: 10px 0 10px 10px;
  width: 400px;
}

.check {
  position: relative;
  left: -220px;
}
</style>